<template>
    <div class="ItemMusicBottom">
        <div class="itemList-top">
            <div class="iconfont">&#xe601;</div>
            <div class="list-radio">播放全部</div>
            <div class="list-and">(共{{itemList.length}}首)</div>
            <div class="list-collection">
                <span>+ 收藏({{subscribedCount}})</span>
            </div>
        </div>
        <div class="itemList-songs" v-for="(item,i) in itemList" :key="i" @click="playMusic(i)">
            <div class="songs-id">{{i + 1}}</div>
            <div class="songs-content">
                <div class="songs-name">{{item.name}}</div>
                <span class="songs-author" v-for="(item1,index) in item.ar" :key="index">{{item1.name}}</span>
            </div>
            <div class="iconfont songs-mv" v-if="item.mv != 0">&#xe637;</div>
            <div class="iconfont songs-list">&#xea72;</div>
        </div>
    </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    setup(props) {
        console.log(props);             
    },
    props: ['itemList', 'subscribedCount'],
    methods: {
        playMusic: function (i) {
            this.updatePlayList(this.itemList)
            this.updatePlayListIndex(i)
        },
        ...mapMutations(['updatePlayList','updatePlayListIndex'])
    }
}
</script>

<style lang="less" scoped>
.ItemMusicBottom{
    width: 100%;
    border-radius: .4rem .4rem 0 0;
    background-color: rgba(255,255,255,.8);
    .itemList-top{
        display: flex;
        margin-left: .1rem;
        margin-top: .02rem;
        width: 100%;
        height: 1rem;
        z-index: -1;
        .iconfont{
            margin-left: .1rem;
            margin-top: .25rem;
            font-size: .45rem;
        }
        .list-radio{
            margin-left: .1rem;
            margin-top: .25rem;
            font-weight: 700;
            font-size: .3rem;
        }
        .list-and{
            width: 44%;
            margin-left: .1rem;
            margin-top: .35rem;
            color: grey;
            font-size: .2rem;
        }
        .list-collection{
            margin-top: .1rem;
            width: 26%;
            height: .7rem;
            line-height: .7rem;
            text-align: center;
            font-size: .26rem;
            background-color: #CC0000 ;
            border-radius: .4rem;
            color: rgba(255,255,255,.8);
        }
    }
    .itemList-songs{
        display: flex;
        position: relative;
        width: 100%;
        padding:0;
        margin: 0;
        height: 1.5rem;
        .songs-id{
            margin: .3rem .3rem;
            color:grey;
            font-size: .35rem;
        }
        .songs-content{
            margin-top: .1rem;
            width: 70%;
            .songs-name{
                font-size: .3rem;
                font-weight: 700;
            }
            .songs-author{
                display: inline-block;
                margin-top: .1rem;
                padding-right: .1rem;
                font-size: .25rem;
                color:grey;
            }
        }
        .songs-mv{
            width: 8%;
            margin: .2rem 0;
            color:grey;
            font-size: .45rem;
        }
        .songs-list{
            position: absolute;
            top: .2rem;
            right: .25rem;
            color:grey;
            font-size: .45rem;
        }
    }
}
</style>

